<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{$title}</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="stylesheet" href="__CSS__/ydui.css"/>
    <link rel="stylesheet" href="__CSS__/app.css"/>
    <script src="__JS__/ydui.flexible.js"></script>
    <script src="__JS__/jquery.min.js"></script>
    <style>
        body{
            background:url('__IMG__/body.jpg') no-repeat;
            background-size:100%;
        }
        *{
            margin:0;
            padding:0;
        }
        .box{
            width:6.3rem;
            margin: 3rem auto 0;
            background-color:#f5f5f5;

        }
        #box-title{
            background-color:#f5f5f5;
            text-align:center;
            height:0.96rem;
            line-height:0.96rem;
            font-size:0.3rem;
            color:#222222;
            border-bottom:2px #d9d9d9 solid;
        }
        .box-body{
            background-color:#f5f5f5;
            opacity:0.95;
            width:100%;
            padding:0.1rem 0 0.38rem 0.39rem;
        }
        .user,.pwd,.code{
            border:1px #d9d9d9 solid;
            width:5.58rem;
            height:0.92rem;
            margin-top:0.2rem;
            margin-right:0;
            font-size:0.28rem;
            line-height:0.92rem;
            color:#a0a0a0;
        }
        .box-body p{
            width:5.58rem;
            margin-top:0.2rem;
            margin-right:0;
            font-size:0.28rem;
            padding-left:0.2rem;
        }
        .box-body img{
            width:2.34rem;
            height:0.92rem;
            display: inline-block;
            vertical-align: -0.37rem;
        }
        .box-body .user{
            padding-left:0.7rem;
            background:url('__IMG__/user.png') no-repeat 4% center;
            background-size:0.32rem 0.32rem;
        }
        .box-body .pwd{
            padding-left:0.7rem;
            background:url('__IMG__/pwd.png') no-repeat 4% center;
            background-size:0.32rem 0.32rem;
        }
        .box-body .code{
            padding-left:0.2rem;
            width:3.22rem;
        }
        .box-body button{
            margin-top:0.3rem;
            height:0.76rem;
            width:2.72rem;
            margin-right:0.14rem;
            display:inline-block;
            color:#fff;
            font-size:0.28rem;
            border:none;
            border-radius:0.05rem;
        }
        #sub{
            background-color:#fec803;
        }
        #res{
            background-color:#00b1fd;
        }
    </style>
</head>
<body>
    <div class="box">
        <div id="box-title">登陆</div>
        <div class="box-body">
            <form id="form" method="post" action="{:U('Public/userLogin')}">
                <input class="user" type="text" name="username" placeholder="请输入用户名" />
                <input class="pwd" type="password" name="pwd" placeholder="请输入密码">
                <input style="display:none;" class="code" type="text" name="code" placeholder="请输入右侧验证码">
                <img style="display:none;" id="code" src="{:U('Public/varify')}" />
                <p>自动登录<input style="margin-left:0.2rem;-webkit-appearance: checkbox;vertical-align: -10%;" type="checkbox" checked name="is_auto" value="1" /></p>
                <button id="sub" type="submit">登陆</button>
                <button id="res" type="reset">注册</button>
            </form>
        </div>
    </div>
</body>
<script>
    $(function(){
        $('#res').click(function(){
            var title = $('#box-title');
            var res = $(this);
            var sub = $('#sub');
            var code_img = $('#code');
            var code = $('.code').eq(0);
            var form = $('#form');
            if(title.html() == '登陆'){
                res.html('返回登陆');
                sub.html('注册并登陆');
                title.html('注册');
                form.attr('action','{:U("Public/userRegister")}')
                code_img.show();
                code.show();
            }else{
                res.html('注册');
                sub.html('登陆');
                title.html('登陆');
                form.attr('action','{:U("Public/userLogin")}')
                code_img.hide();
                code.hide();
            }
        });
        $('#code').click(function(){
            console.log($(this).attr('src'));
            $(this).attr('src','{:U("Public/varify")}&rand='+Math.random())
        })
    });
</script>
</html>